<template>
	<view class="uni_box home">
		<navbar title='每日分享'>
		</navbar>
		<view class="content">
			<view class="jiulist">
				<view class="jiuitem" v-for="(item,index) in list" :key="index" @click="moredetail(item)">
					<image class="hebg" :src="item.thumbnail"></image>
					<view class="jiuright">
						<text class="jname">{{item.title}}</text>
						<!-- <view class="qian">
							<text class="qianjiu">{{item.type_name}}</text>
						</view> -->
						<view class="yanview">
							<text class="yantime">{{item.created_at}}</text>
							<image class="icon_eye_s" src="/static/img/icon_gk.png"></image>
							<text class="yuenum">{{item.see_number}}</text>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" @loadmore="loadmore" /> 
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 1,
				limit: 10,
				last_page: 1,
				status: "loadmore",
			}
		},
		onLoad() {
			this.getList()
		},
		onShow() {
		},
		onReachBottom: function () {
			this.loadmore();
		},
		methods: {
			async getList(){//列表数据
				let res = await this.$u.api.news({
					limit:this.limit,
				  	page:this.page
				});
				this.last_page = res.list.last_page;
				let list = res.list.list;
				this.list = this.page == 1 ? list : [...this.list, ...list];	
				if(this.page >= this.last_page){
				  this.status = 'nomore';
				}
				
			},
			loadmore() {
				let page = this.page;
				if (this.status == 'loadmore') {
					this.page++;
					this.getList();
				}
			},
			moredetail(item){
				this.navrouter("/pages/TPage/DayMoreDetail?id="+item.id);
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		padding:20rpx 30rpx;
		.jiulist{
			.jiuitem{
				padding: 20rpx 10rpx;
				display: flex;
				flex-direction: row;
				// align-items: center;
				.hebg{
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
					margin-right: 30rpx;
				}
				.jiuright{
					display: flex;
					flex-direction: column;
					flex: 1;
					.jname{
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #000000;
					}
					.qian{
						display: flex;
						flex-direction: row;
						align-items: center;
						margin: 15rpx;
						.qianjiu{
							padding: 9rpx 12rpx;
							background: #EEEEEE;
							border-radius: 4rpx;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #51565D;
						}
					}
					.yanview{
						display: flex;
						margin-top: auto;
						flex-direction: row;
						align-items: center;
						.yantime{
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}
						.icon_eye_s{
							margin-left: auto;
							margin-right: 9rpx;
							width: 28rpx;
							height: 28rpx;
						}
						.yuenum{
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}

					}
				}
			}
		}
	}
</style>
